<template>
  <div>
      <div class="login-box">登录页面
      <el-form :rules="rules">
  <el-form-item :model="ruleForm" prop="name">
    <el-input v-model="ruleForm.name" ></el-input>
  </el-form-item>
    </el-form>
    </div>
  </div>
</template>

<script>
export default {
    data() {
      return {
        ruleForm: {
          name: '12',
        },
          rules: {
          name: [
            { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
          ]
           },
      }
    }
};
</script>

<style lang="scss">
    body{
        background:#34495e ;
        .login-box{
            width: 600px;
            height: 400px;
            background: #fff;
            position: absolute;
          left: 50%;
          top: 50%;
          transform: translate(-50%,-50%);
        }
    }
</style>
